<template>
    <el-container class="appwrap">
        
        <el-main >
             <!-- <button @click="toggle()">toggle</button>
             <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
               <div class="test" v-show="a"></div>
             </transition> -->
             <section>
                <button @click="showa">点击查看变化</button>
                <transition name="fade"> 
                    <div v-if="show == 'one'" key="one">
                        oneoneoneone
                    </div>
                    <div v-if="show == 'two'" key="two">
                         twotwotwotwo
                    </div>
                    <div v-if="show == 'three'" key="three">
                        threethreethree
                    </div>
                </transition> 
             </section>
        </el-main> 

    </el-container> 
</template>

<script>
export default {
  data() {
    return { 
      show: 'one'
    };
  },
  methods: {
    showa:function (){
        if(this.show == 'one'){
            return this.show = 'two';
        }else if(this.show == 'two'){
            return this.show = 'three';
        }else{
            return this.show = 'one';
        }
    }
  }
};
</script>
<style>
/* 动画效果一 */
/* .fade-enter-active,
.fade-leave-active {
  transition: all 1s linear;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateX(50px);
} */

/* 动画效果二 */
.fade-enter-active{
     animation:Ado .5s ease-in;
 }
 @keyframes Ado{
       0%{transform:scale(0.5,0.5);}
       60%{transform:scale(1,1);}
       80%{transform:scale(1.5,1.5);}
       100%{transform:scale(1,1);}
 }
 .fade-leave-active{
     animation:Bdo .5s ease-in;
 }
 @keyframes Bdo{
       0%{transform:scale(1,1);}
       60%{transform:scale(1.5,1.5);}
       80%{transform:scale(1,1);}
       100%{transform:scale(0.5,0.5);}

 }

 .achange{
   animation:Ado .5s ease-in;
 }
 @keyframes Ado{
       0%{transform:scale(0.5,0.5);}
       60%{transform:scale(1,1);}
       80%{transform:scale(1.5,1.5);}
       100%{transform:scale(1,1);}
 }

.test {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  margin: 100px auto;
}
</style>
 